<template>
    <div class="ZYF-management__exception">
        <div class="exception-top">
            <a-form-model layout="inline" :model="page" :colon="false">
                <a-form-model-item label="警告名称">
                    <a-input v-model="page.name" placeholder="请输入警告名称" allowClear/>
                </a-form-model-item>
                <a-form-model-item>
                    <a-button type="primary" @click="searchFn">搜索</a-button>
                </a-form-model-item>
            </a-form-model>
            <a-button type="primary" @click="addTreeFn">添加</a-button>
        </div>
        <div class="exception-content">
            <my-table :data-source="tableData" :pagination="false" :rowKey="record=> record.id">
                <a-table-column title="序号" align="center" :ellipsis="true" :customRender="(text, record, index) =>(page.current - 1) * page.size + index + 1"/>
                <a-table-column title="警告类型名字" data-index="name" align="center" :ellipsis="true" />
                <a-table-column title="数据编码" data-index="waringCode" align="center" :ellipsis="true" />
                <a-table-column title="计量单位" data-index="unit" align="center" :ellipsis="true" />
                <a-table-column title="数据类型" data-index="dataType" align="center" :ellipsis="true" />
                <a-table-column title="备注" data-index="note" align="center" :ellipsis="true" />
                <a-table-column title="是否启用" data-index="isEnable" align="center">
                    <template slot-scope="isEnable">
                        <a-switch default-checked :checked="isEnable" />
                    </template>
                </a-table-column>
                <a-table-column title="操作" align="center" width="200px">
                    <template slot-scope="text,record,index">
                        <div class="handle">
                            <a-button size="small" type="primary" @click="editFn(record,index)">修改</a-button>
                            <a-button size="small" type="danger" @click="delFn(record.id)">删除</a-button>
                        </div>
                    </template>
                </a-table-column>
            </my-table>
        </div>
        <div class="exception-bottom clearfix">
            <div class="page-box">
                <a-pagination :show-total="total => `共 ${total} 条记录`" v-model="page.current" :total="total" :defaultPageSize="page.size" :item-render="itemRender" hideOnSinglePage @change="pagechangeFn" />
            </div>
        </div>
        <!-- 添加弹框 -->
        <a-modal v-model="addPop" width="50%" :title="title" centered @cancel="()=>form = {}" :maskClosable="false" destroyOnClose>
            <a-form-model ref="formrules" :rules="formrules" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :colon="false">
                <a-form-model-item label="异常类型名称" prop="name">
<!--                    <a-input v-model="form.name" />-->
                  <a-auto-complete v-model="form.name" placeholder="请输入异常类型名称" @select="onSelect" @search="onSearch" @change="onChangeInput">
                    <template slot="dataSource">
                      <a-select-option v-for="v in dataSource" :key="v.name">
                        {{ v.name }}
                      </a-select-option>
                    </template>
                  </a-auto-complete>
                </a-form-model-item>

                <a-form-model-item label="父级监测类型" prop="parentId">
                    <a-tree-select v-model="form.parentId" @change="onChange" :dropdown-style="{ maxHeight: '200px', overflow: 'auto' }" :tree-data="treeData" :defaultValue="form.parentId"  placeholder="请选择父级监测类型" :replaceFields="replaceFields"></a-tree-select>
                </a-form-model-item>
              <a-form-model-item label="计量单位" prop="unit">
                <a-input v-model="form.unit" />
              </a-form-model-item>
              <a-form-model-item label="数据类型" prop="dataType">
                <a-input v-model="form.dataType" />
              </a-form-model-item>
                <a-form-model-item label="数据编码" prop="waringCode">
                    <a-input v-model="form.waringCode" />
                </a-form-model-item>
                <a-form-model-item label="是否启用" prop="isEnable">
                    <a-switch v-model="form.isEnable" />
                </a-form-model-item>
                <a-form-model-item label="备注" prop="note">
                    <a-input v-model="form.note" type="textarea" />
                </a-form-model-item>
            </a-form-model>

            <template slot="footer">
                <a-button type="primary" @click="formSubFn">确定</a-button>
            </template>
        </a-modal>
    </div>
</template>
<script>
export default {
    name: "exception",
    data() {
        return {
          dataSource: [],
            title: "",
            addPop: false, // 弹窗是否显示
            tableData: [], // 表格数据
            page: {
                // 分页数据查询
                current: 1,
                size: 10,
                name: "",
            },
            defaultValue: "",
            treeData: [], // 弹窗树形数据
            labelCol: { span: 4 },
            wrapperCol: { span: 16 },
            form: {
                // 弹窗添加表单数据
                name: "",
                parentId: "",
                waringCode: "",
                isEnable: true,
                note: "",
              unit:"",  // 计量单位
              dataType:"",  // 数据类型
            },
            // 表单验证
          formrules: {
            name: [{required: true, message: "警告名称必填", trigger: "blur",},],
            parentId:[{required: true, message: "父级监测类型必填", trigger: "blur",},]
          },
            replaceFields: {
                // 树形字段改变
                title: "name",
                value: "id",
                children: "waringTypePoList",
            },
            total: 0,
        };
    },
    methods: {
      onSearch(searchText) {
        if (!searchText.trim()) return
        this.$api.WaringTypeFindByName(searchText).then(res => {
          if (res.data.code == 0) {
            this.dataSource = res.data.data;
          }
          // console.log(res.data)
        })
        console.log('onsearch', searchText)
      },
      onSelect(value) {
        // console.log('onSelect', value);
      },
      onChangeInput(value) {
        // console.log('onChange', value);
      },
      searchFn() {
        // 搜索按钮方法
        this.page.current = 1;
        this.getData();
      },
        addTreeFn() {
            // 添加按钮方法
            this.title = "添加警告类型";
            this.getTreeData();
            this.addPop = true;
        },
        editFn(record) {
            // 修改按钮方法
            this.title = "修改警告类型";
            this.getTreeData();
            this.form = record;
            this.addPop = true;
        },
        delFn(id) {
            let _that = this;
            this.$confirm({
                title: "是否确认删除?",
                onOk() {
                    _that.$api.Delwaring(id).then((res) => {
                        if (res.data.data == true) {
                            _that.$message.info("删除成功");
                            _that.getData();
                        }
                    });
                },
                onCancel() {
                    console.log("Cancel");
                },
                class: "delk",
            });
        },
        formSubFn() {
            // 弹窗确定按钮方法
            this.$refs.formrules.validate((valid) => {
                if (valid) {
                    this.form.waringCode = this.form.waringCode.trim();
                    if (this.title == "添加警告类型") {
                        this.postTreeData();
                    } else {
                        this.$api.PuteditTree(this.form).then((res) => {
                            if (res.status == 200) {
                              this.$message.info("修改成功");
                                this.addPop = false;
                                this.form = {};
                                this.getData();
                            }
                        });
                    }
                }
            });
        },
        // 分页方法
        itemRender(current, type, originalElement) {
            if (type === "prev") {
                return <a>上一页</a>;
            } else if (type === "next") {
                return <a>下一页</a>;
            }
            return originalElement;
        },
        pagechangeFn(page, pageSize) {
            this.page.current = page;
            this.getData();
        },
        // 数据请求方法
        getTreeData() {
            this.$api.GetfindByTree().then((res) => {
                if (res.data.code == 0) {
                    this.treeData = this.treeDataHandle(res.data.data,0);
                    this.treeData.unshift({
                        id: -1,
                        isEnable: true,
                        name: "最大级别",
                    });
                    // console.log(this.treeData)
                }
            });
        },
        // 处理树形数据
        treeDataHandle(data,num){
            let nums = ++num
            data.forEach(v=>{
              v.evals = nums;
              if(num == 2){
                v.waringTypePoList = [];
                return
              }
              this.treeDataHandle(v.waringTypePoList,nums)

            })
          return data
        },
        postTreeData() {
            this.$api.PostfindByTree(this.form).then((res) => {
                if (res.data.code == 0) {
                    this.addPop = false;
                    this.form = {};
                    this.getData();
                }
            });
        },
        getData() {
            this.$api.GetfindByPage(this.page).then((res) => {
                if (res.data.code == 0) {
                    this.tableData = res.data.data;
                    this.total = res.data.total;
                }
            });
        },
      // 树形下拉chang方法
      onChange(value, label, extra){
          let num = extra.triggerNode._props.dataRef.evals
          if(num === 2){
            this.formrules = {
              name: [{required: true, message: "警告名称必填", trigger: "blur",},],
              parentId:[{required: true, message: "父级监测类型必填", trigger: "blur",},],
              unit: [{required: true, message: "计量单位必填", trigger: "blur",},],
              dataType: [{required: true, message: "数据类型必填", trigger: "blur",},],
              waringCode: [{required: true, message: "数据编码必填", trigger: "blur",},],
            };
          }else {
            this.formrules = {
              name: [{required: true, message: "警告名称必填", trigger: "blur",},],
              parentId:[{required: true, message: "父级监测类型必填", trigger: "blur",},]
            }
          }
      }
    },
    mounted() {
        this.getData();
    },
};
</script>

<style lang="scss" scoped>
.tree-box {
    height: 100px;
    overflow-y: auto;
}
.tree-box::-webkit-scrollbar {
    display: none;
}
.ZYF-management__exception {
    width: 100%;
    height: 100%;
    padding: 1%;
    box-sizing: border-box;
    .exception-top {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .exception-content {
        width: 100%;
        height: calc(94% - 60px);
        .handle{
            display: flex;
            justify-content: space-around;
        }
    }
    .exception-bottom {
        width: 100%;
        .page-box {
            float: right;
        }
    }
}


/* 树形结构样式 */
::v-deep .ant-select-tree li .ant-select-tree-node-content-wrapper {
    color: rgba(255, 255, 255, 0.8) !important;
    background-color: aqua;
}
::v-deep
    .ant-select-tree
    li
    .ant-select-tree-node-content-wrapper.ant-select-tree-node-selected {
    background-color: #2c6a60 !important;
}

</style>
